<template>
  <div class="page-box">
    <div style="color:#fff;font-size:0.5rem;text-align: center">{{ $t('LoginPage.dl') }}</div>
    <div class="main" :style="loginbg">
      <div class="box">
        <ul>
          <li>
            <img src="/static/img/icon1.png" alt="" class="lco">
            <input v-model="username" type="text" name="mobile" id="mobile" placeholder="">
          </li>
          <li>
            <img src="/static/img/icon2.png" alt="" class="lco">
            <input v-model="password" type="password" name="password" id="password" placeholder="">
          </li>
        </ul>
        <div><button class="btn" @click="handleClickLogin">{{ $t('LoginPage.dl') }}</button></div>
        <div><a href="/#/register"><button class="btn">{{ $t('LoginPage.zc') }}</button></a></div>
        <div class="c">
          <div style="overflow: hidden">
            <a style="float:left;"><p style="border-bottom:none;">APP{{ $t('LoginPage.bb') }}:1.0.17</p></a>
            <a href="/#/forget" style="float:right;"><p class="">{{ $t('LoginPage.wjmm') }}</p></a>
          </div>
        </div>
      </div>
    </div>
<!--    <div class="top-box">-->
<!--      <div class="pull-left">-->
<!--        <a href="/#/forget">{{ $t('LoginPage.wjmm') }}</a>-->
<!--      </div>-->
<!--      <div class="pull-right">-->
<!--        <a href="/#/register">{{ $t('LoginPage.zc') }}</a>-->
<!--      </div>-->
<!--    </div>-->
<!--    <div class="login-box">-->
<!--      <div class="form-line">-->
<!--        <nut-textinput-->
<!--          v-model="username"-->
<!--          label=""-->
<!--          maxLength="20"-->
<!--          placeholder="$t('LoginPage.qsrsjh')"-->
<!--          :clearBtn="true"-->
<!--          :disabled="false"-->
<!--        />-->
<!--      </div>-->
<!--      <div class="form-line">-->
<!--        <nut-textinput-->
<!--          v-model="password"-->
<!--          label=""-->
<!--          type="password"-->
<!--          maxLength="20"-->
<!--          placeholder="$t('LoginPage.qsrmm')"-->
<!--          :clearBtn="true"-->
<!--          :disabled="false"-->
<!--        />-->
<!--      </div>-->
<!--      <div class="form-line">-->
<!--        <nut-button-->
<!--          block-->
<!--          style="border-radius: 0.3rem;background: #fff;color:#000;"-->
<!--          @click="handleClickLogin"-->
<!--          :disabled="username==''||password==''"-->
<!--        >-->
<!--          {{ $t('LoginPage.dl') }}-->
<!--        </nut-button>-->
<!--      </div>-->
<!--    </div>-->
  </div>
</template>

<script>

import helper from "../utils/helper";

export default {
  name: 'LoginPage',
    components: {},
    data () {
    return {
      username:'',
      password:'',
      loginbg:{
        background:'',
      }
    }
  },
    methods:{
      handleClickLogin(){
          if(this.username !="" && this.password != ""){
              this.doLogin(this.username,this.password);
          } else{
              this.$toast.fail(this.$t('LoginPage.qsrwzxx'));
          }
      },
        doLogin(username,password){
          let loading = this.$toast.loading();
          this.$axios.post(this.$api_url.login,this.$qs.stringify({
              username:username,
              password:password,
          })).then(res=>{
              if(res.data.code == 0){
                  this.$toast.success(res.data.msg);
                  this.$helper.setToken(res.data.data);
                  location.href="/#/";
              } else{
                  this.$toast.fail(res.data.msg);
              }
          }).catch(ex=>{

          }).then(()=>{
              loading.hide();
          })
        },
        getData(){
            let loading = this.$toast.loading();
            this.$axios.get(this.$api_url.user).then((res)=>{
                location.href="/#/"
            }).catch((err)=>{
                this.$toast.fail(err.message);
            }).then(()=>{
                loading.hide();
            })
        },
        setbg(){
          let bg = this.$qs.parse(localStorage.getItem('config_bg'));
          this.loginbg.background = 'url('+ bg.LoginBG +')';
          this.loginbg['background-size'] = '100% auto';
          this.loginbg['background-repeat'] = 'no-repeat';
        }
    },
    mounted() {
		document.getElementById("mobile").setAttribute("placeholder",this.$t('LoginPage.qsryhm'));
		document.getElementById("password").setAttribute("placeholder",this.$t('LoginPage.qsrmm'));

        let token = helper.getToken();
        if(token){
            this.getData();
        }
        this.setbg();
        
    }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  @import "../../static/css/app.css";

  .main {
    height: 10.666667rem;
    position: fixed;
    height: 100%;
    width: 100%;
    margin-top: -1.2rem;
    background: url(/static/img/login-bg.jpg);
    background-repeat: no-repeat;
    background-size: 100% auto;
    -moz-background-size: 100% auto;
    background-color: #355bea;
    padding-top: 5.6rem;
  }
  .box {
    margin: 0 .666667rem;
    position: relative;
    z-index: 999;
    border-radius: .266667rem;
    padding: .4rem;
    padding-top: .666667rem;
    margin-top: 1.2rem;
    background: rgba(29,47,147,.8);
  }
  .box ul li {
    overflow: hidden;
    position: relative;
    padding: .066667rem;
    margin: .066667rem;
    margin-bottom: .266667rem;
  }

  .box ul li .lco {
    width: .853333rem;
    position: absolute;
    left: .4rem;
    top: .24rem;
    border-right: .013333rem solid #ccc;
    padding-right: .266667rem;
  }

  .box ul li input {
    float: left;
    width: 100%;
    height: 1.066667rem;
    padding: 0 1.6rem;
    font-size: .4rem;
    outline-style: none;
    border: 0;
  }
  .btn {
    width: 100%;
    font-size: .4rem;
    line-height: .986667rem;
    color: #c73a4f;
    text-align: center;
    border-radius: .08rem;
    background-color: #fee0a3;
    margin-top: .133333rem;
    font-weight: 600;
    cursor: pointer;
    outline-style: none;
    border: 0;
  }
  .box ul li .btnGetCode {
    width: 1.6rem;
    position: absolute;
    right: .4rem;
    background: none;
    color: #2f3848;
    width: auto;
    margin: 0;
  }
  .c p {
    text-align: center;
    border-bottom: .013333rem solid #fff;
    color: #fff;
    font-weight: 300;
    font-size: .24rem;
    padding: .066667rem;
    display: inline-block;
    max-width: 100%;
    margin-bottom: .066667rem;
  }
  .box div p {
    line-height: .8rem;
    font-size: .373333rem;
    color: #fff;
    padding-top: .133333rem;
  }
  /*.page-box{*/
  /*  height: 100%;*/
  /*  background: url('/static/img/login-bg.jpg');*/
  /*  background-size: 100% 100%;*/
  /*  padding:0.2rem;*/
  /*}*/
  /*.login-box{*/
  /*  position: absolute;*/
  /*  bottom: 2rem;*/
  /*  left: 0;*/
  /*  width: 100%;*/
  /*  font-size:0.5rem;*/
  /*}*/
  /*.login-box a{*/
  /*  color:#fff;*/
  /*}*/
  /*.top-box{*/
  /*  padding:0 0.5rem;*/
  /*  position: absolute;*/
  /*  bottom: 0.5rem;*/
  /*  width: 100%;*/
  /*}*/
  /*.top-box a{*/
  /*  color:#fff;*/
  /*  font-size:0.5rem;*/
  /*}*/
</style>
